<template>
    <div class="mainBox">
        <PageHeaderNav :content="$store.state.PhotoResultModule.searchType" :need-back="true"
                       :need-underline="false"></PageHeaderNav>
        <div class="container">
            <div class="top">
                <img :src="$store.state.PhotoResultModule.photo" alt="">
            </div>
            <div class="content" v-loading="$store.state.PhotoResultModule.isLoading">
                <div class="title">
                    <img src="@/assets/images/searchView/title.png" alt="">
                    <h2>{{ $store.state.PhotoResultModule.searchResult.name }}</h2>
                </div>
                <div class="result speech">
                    <div v-for="(info, type) in $store.state.PhotoResultModule.searchResult.content">
                        <h3>【{{ type }}】</h3>
                        <p>{{ info }}</p>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <el-button type="success" round size="medium" class="button btnFocus" @click="searchAgain">继续搜索
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import PageHeaderNav from "@/components/Publlic/PageHeaderNav.vue";

export default {
    components: {
        PageHeaderNav
    },

    data() {
        return {
            isCollect: true,
        }
    },

    methods: {
        changeCollect() {
            this.isCollect = !this.isCollect
        },

        searchAgain() {
            this.$router.push("/searchView/")
        }
    },

    created() {
        if (!this.$store.state.PhotoResultModule.allowRouter) this.$router.back()
    },

    beforeDestroy() {
        this.$store.commit("PhotoResultModule/init")
        this.$store.commit("PhotoResultModule/changeAllowRouter", false)
    }
}
</script>

<style lang="less" scoped>
.mainBox {
    width: 100%;
    height: 100%;

    .container {
        width: 100%;
        height: calc(100vh - 65px);
        position: relative;

        .top {
            width: 100%;
            height: 20%;
            box-sizing: border-box;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: scroll;

            img {
                width: 100%;
            }
        }

        .content {
            box-sizing: border-box;
            width: 100%;
            height: 72.5%;
            position: relative;
            top: -2.5%;
            background-color: white;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            overflow: scroll;
            padding: 30px 15px 0 15px;

            .title {
                display: flex;
                align-items: center;
                height: 10%;
                margin-bottom: 5px;

                img {
                    height: 100%;
                }

                h2 {
                    width: 90%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }

            .result {
                height: 90%;
                overflow-y: scroll;

                div {
                    margin-bottom: 8px;
                }
            }
        }

        .bottom {
            width: 100%;
            height: 10%;
            padding: 0 15px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            position: absolute;
            bottom: 0;

            .button {
                width: 100%;
                height: 80%;
                font-size: 22px;
                background-color: var(--color);
                border-radius: 15px;
            }
        }
    }
}

</style>